<template>
  <view class="my_info br6">
    <!--地址-->
    <view
      class="add-address d-s-c"
      @click="addAddress()"
      v-if="!addressObj"
    >
      <view class="icon-box mr10">
        <text class="icon iconfont icon-dizhi1"></text>
      </view>
      <text>请添加收货地址</text>
    </view>
    <view v-else class="address-defalut-wrap" @click="addAddress()">
      <view class="d-b-c">
        <view class="add-addr flex-1">
          <view class="flex-1">
            <view class="d-s-c" style="height: 50rpx;">
              <view
                class="d-c-c f20"
                style="
                  width: 56rpx;
                  height: 32rpx;
                  background: #00c8be;
                  border-radius: 8rpx;
                "
                ><text class="white">默认</text></view
              >
              <text class="f30 ml10 fb">
                {{ addressObj.fullname || "" }}
              </text>
              <text class="f30 ml10 fb">
                {{ addressObj.mobilePhone || "" }}
              </text>
            </view>
            <view class="info mb10">
              <text class="province-c-a f24 fb text-ellipsis-2">
                {{ addressObj.prov + ' ' + addressObj.city + ' ' + addressObj.area + '' }}
								{{ addressObj.address || "" }}
              </text>
            </view>
          </view>
          <view class="icon iconfont icon-jiantou ml80 f-s-0"> </view>
        </view>
      </view>
    </view>
    <view class="bottom_line"></view>
  </view>
</template>

<script>
const baseData = { tokenInfo: "", addressObj: null };

const funcs = {};
funcs.addAddress = function () {
  this.tokenInfo = uni.getStorageSync("token");
  if (!this.tokenInfo)
    return uni.navigateTo({ url: "/pages/login/login" });

		const address = this.exist_address;
	if (address && typeof address === 'object') return;

  my.getAddress({
    success: (res) => {
      if (res.resultStatus == 9000) {
        this.addressObj = res.result;
        this.$emit("changeStates", this.addressObj);
      }
    },
    fail: (res) => {
      my.alert({
        title: "getAddress fail",
        content: JSON.stringify(res),
      });
    },
  });
};

const mounted = function () {
	console.log('...', this.exist_address)
	const address = this.exist_address;
	if (address && typeof address === 'object') {
		const origin = this.exist_address || {};
		const region = origin.region || {};
		this.addressObj = {
			fullname: origin.name,
			mobilePhone: origin.phone,
			prov: region.province,
			city: region.city,
			area: region.region
		}
	}
}

export default {
  data() { return { ...baseData }; },
  props: ["exist_address"],
  methods: { ...funcs },
	mounted
};
</script>

<style lang="scss">
.info {
  font-size: 33rpx;
  line-height: 43rpx;
}

.add-addr {
  display: flex;
  align-items: center;
}

.tel {
  font-size: 27rpx;
  color: #999999;
}

.choose-address {
  width: 88rpx;
  height: 88rpx;
  margin-right: 35rpx;
}

.icon-dizhi {
  margin-right: 25rpx;
  color: #ff6633;
  font-size: 60rpx;
}

.addree_icon {
  width: 42rpx;
  height: 42rpx;
}

.my_info {
  background-color: #ffffff;
  margin-top: 16rpx;
}

.icon-box .icon.icon-dizhi1 {
  @include font_color("font_color");
  font-size: 44rpx;
}

.my_info .icon.icon-jiantou {
  color: #333333;
  font-size: 24rpx;
}
.bottom_line {
  height: 10upx;
  background-image: linear-gradient(
    -45deg,
    #4cd9d2 0,
    #4cd9d2 10px,
    transparent 10px,
    transparent 15px,
    #fea295 15px,
    #fea295 25px,
    transparent 25px,
    transparent 30px
  );
  background-size: 40px 4upx;
  background-repeat: repeat-x;
  background-position: left bottom;
}
</style>
